<template>
    <div class="aaa">
        <!-- 轮播图 -->
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="red" >
            <van-swipe-item v-for="item in gallery" :key="item.id">
                <img :src="item.img_url" alt="">
            </van-swipe-item>
        </van-swipe>
        
        <tips />

        <div class="info">
            <h3>{{info.name}}</h3>
            <p>{{info.goods_brief}}</p>
            <p>{{info.retail_price | geshi}}</p>
        </div>
        
        <van-cell is-link @click="showSku=true">展示弹出层</van-cell>
        <van-popup
        v-model="showPopup"
        closeable
        position="bottom"
        :style="{ height: '30%' }"
        />

        <!-- 参数 -->
        <div class="canshu">
            <h2>商品参数</h2>
            <ul>
                <li v-for="item in attribute" :key="item.id">
                    <span>{{item.name}}</span>
                    <span class="van-ellipsis">{{item.value}}</span>
                </li>
            </ul>
        </div>

        <!-- 图片 -->
        <div class="imgs" v-html="info.goods_desc">
              <!-- {{ info.goods_desc }} -->
        </div>

        <div class="wenti">
            <div class="wenti-title">
               <h3>常见问题</h3> 
               <span></span>
            </div>
            <ul>
                <li v-for="item in issue" :key="item.id">
                    <span class="dian"></span><span>{{item.question}}</span>
                    <p>{{item.answer}}</p>
                </li>
            </ul>
            <div class="wenti-title">
               <h3>相关产品</h3> 
               <span></span>
            </div>
            <div class="zujian">
            <products :goodsList="goodsList"/>
            </div>
        </div>
        <!-- 底部 -->
        <APPGoodsAction @isShowCart="addToCart" :goodsCount="goodsCount"/>
        
        <!-- sku -->
        <van-sku
        ref="sku"
        v-model="showSku"
        :sku="sku"
        :goods="goods"
        :hide-stock="sku.hide_stock"
        />
    </div>
</template>

<script>
import products from "@/components/products"
import tips from "@/components/Tips"
import APPGoodsAction from "@/components/APPGoodsAction"
import {getGoodsDetail,getGoodsRelated,getCartNum,toAddCart} from "@/request/api"
export default {
    data () {
        return {
            showPopup:false,    //弹出层
            gallery:[],  //轮播图
            info:{},    //产品信息
            attribute:[],   //产品参数
            issue:[],   //问题解答
            goodsList:[],   //相关产品
            goodsCount:0,   //购物车数量
            productList:[],     //传值
            // sku
            showSku:false,
            sku:{
                tree:[],
                hide_stock:false,     //显示库存?
                price:'1.00',    //价格
                stock_num:0,     //库存数量
                
            },
            goods:{
                picture:""
            },
        }
    },
    created(){
        getGoodsDetail({
            id:this.$route.query.id
        }).then(res=>{
            // console.log(res.data);
            let {gallery,info,attribute,issue,productList} =res.data
            this.gallery=gallery
            this.info=info
            this.attribute=attribute
            this.issue=issue
            this.productList=productList
            // sku数据
            this.goods.picture=info.list_pic_url
            this.sku.price=info.retail_price
            this.sku.stock_num=info.goods_number

        }),
        // 相关产品
        getGoodsRelated({
            id:this.$route.query.id
        }).then(res=>{
            let {goodsList} =res.data
          /*  console.log(res.data); */
            this.goodsList=goodsList
        }),
        // 购物车数量
        getCartNum().then(res=>{
            this.goodsCount=res.data.cartTotal.goodsCount
        })
    },
    methods:{
        // isshowPopup(){
        //     this.showPopup=true
        // },
        addToCart(){
            let ret=this.utils.mustLogin()
            if(!ret) return
            // 如果sku是展示的，那么就是执行真正的加购物车操作
            if(this.showSku){
                // 真正执行发起加入购物车的请求
                let stepNum=this.$refs.sku.getSkuData().selectedNum
                toAddCart({
                    goodsId:this.$route.query.id,
                    productId:this.productList[0].id,
                    number:stepNum
                }).then(res=>{
                    // 更新购物车数量
                    console.log(res.data.cartTotal.goodsCount);
                    this.goodsCount=res.data.cartTotal.goodsCount
                    
                    this.$toast.success("添加成功!")
                })
            }
            this.showSku=!this.showSku
        }
    },
    components:{
        products,
        tips,
        APPGoodsAction
    }
}
</script>
 
<style lang = "less" scoped>
.aaa{
    background-color: #efefef;
    
  .van-swipe-item{
      height: 500px;
      img{
          width: 100%;
          height: 100%;
      }
  }
  
  .van-cell{
      border-top: 1px solid #333;
      /* border-bottom: 1px solid #333; */
  }
  .info{
      height: 160px;
      background-color: #fff;
      h3{
          height: 70px !important;
          line-height: 70px !important;
      }
      p{
          text-align: center;
          height: 40px;
          line-height: 40px;
      }
  }
  .canshu{
      margin-top: 20px;
      padding: 0 10px;
      background-color: #fff;
      h2{
          font-size: 22px;
          height: 50px;
          line-height: 50px;
      }
      li{
          width: 100%;
          margin-bottom: 5px;
          padding: 8px 0;
          border-radius: 5px;
          background-color: #efefef;
          display: flex;
          span{
              &:first-child{
                  width: 100px;
                  color: #666;
                  text-align: right;
              }
              &:last-child{
                  flex: 1;
                  padding-left: 5px;
              }
          }
      }
  }
  /* /deep/ */
  /deep/.imgs{
      img{
      max-width: 100% ;
        display: block;
        /* vertical-align: middle; */
      }
  }
  .wenti{
      background-color: #fff;
      padding-bottom: 120px;
      .wenti-title{
          position: relative;
          height: 80px;
          h3{
              width: 140px;
              position: absolute;
              left: 0;
              right: 0;
              top: 0;
              bottom: 0;
              margin: auto;
              background-color: #fff;
              z-index: 9;
          }
          span{
              width: 50%;
              height: 3px;
              background-color: #ccc;
              position: absolute;
              left: 0;
              right: 0;
              top: 0;
              bottom: 0;
              margin: auto;
              z-index: 8;
          }
      }
      li{
          width: 100%;
          span{
              font-size: 16px;
          }
          .dian{
              background-color: red;
              width: 5px;
              height: 5px;
              display: inline-block;
              border-radius: 50%;
              margin: 0 10px;
              position: relative;
              transform: translate(0, -3px);
          }
          p{
              color: #666;
              padding: 10px;
              text-align: left;
              line-height: 1.33;
          }
      }
      .zujian{
           ul{
            display: flex;
            width: 100%;
            justify-content: space-between;
            flex-wrap: wrap;
            font-size: 16px;
            li{
            width: 49%;
            font-size: 14px;
            p{
                margin: 0;
                padding: 0;
                text-align: center;
                &:nth-of-type(2){
                color: red;
                }
            }
            img{
                width: 100%;
            }
        }
    }
      }
  }
  
}
/deep/.van-sku-messages{
    padding: 0;
}
.van-sku-container{
    min-height: auto;
}
/deep/.van-sku__stepper-title,/deep/.van-sku__stepper{
    float: none;
}
</style>